<? $this->start('fbMeta') ?>
<?= $this->element('facebook_meta') ?>
<? $this->end() ?>

<?php
    
    $size = array(
        'small'  => array(80, 80),
        'medium' => array(440, 250)
    );

    $productId   = $product['Product']['id'];
    $productName = $product['Product']['name'];

    $productImages = $product['ProductImage'];
?>
<h1><?= $productName ?></h1>

<div id="product-images" class="left clear" style="width:<?= $size['medium'][0] ?>px">
    <table class="medium" width="<?= $size['medium'][0] ?>" height="<?= $size['medium'][1] ?>">
        <tr>
            <td align="center" valign="middle">
                <?= $this->Html->image('loading-white.gif', array(
                    'class' => 'throbber',
                    'style' => 'margin-left:' . (($size['medium'][0]-30)/2) . 'px;' .
                               'margin-top:' . (($size['medium'][1]-30)/2) . 'px'
                )) ?>
                <?= $this->Html->image('products/' . $productId . '/' . @$productImages[0]['src'] . '?w=' . $size['medium'][0].'&h=' . $size['medium'][1], array(
                    'url'   => empty($productImages) ? false : "/img/products/{$productId}/" . $productImages[0]['src'],
                    'class' => 'image'
                )) ?>
            </td>
        </tr>
    </table>
    <? if (! empty($productImages)): ?>
    <ul>
        <? foreach ($productImages as $image): ?>
        <li><?= $this->Html->image('products/' . $productId . '/' . $image['src'] . '?w='.$size['small'][0].'&h=' . $size['small'][1], array(
            'url' => '/img/products/' . $productId . '/' . $image['src'] . '?w='.$size['medium'][0].'&h=' . $size['medium'][1]
        )) ?></li>
        <? endforeach; ?>
    </ul>
    <? endif ?>
</div>
<div class="right product-details">
    <? foreach ($product['ProductDetail'] as $detail): ?>
    <?php
        $name    = $detail['name'];
        $value   = $detail['value'];
        $comment = $detail['comment'];
        
        $class = '';
        if (preg_match('/^\d+(\.\d+)?$/', $value)) {
            if (strtolower($name) == 'cena') {
                $class = 'big red';
                $value = currency_format($value, true);
            } else {
                $value = currency_format($value);
            }
        }
    ?>
    
    <p>
        <span class="label"><?= $name ?>:</span>
        
        <strong<? if(! empty($class)): ?> class="<?= $class ?>"<? endif ?>><?= $value ?></strong>
        
        <? if (! empty($comment)): ?>
            <span class="info"><?= $comment ?></span>
        <? endif ?>
    </p>
    <? endforeach ?>
    <p>&nbsp;</p>
    <?= $this->element('facebook_share')?>
</div>
<br clear="all">

<? if (! empty($similar_products)): ?>
<h2>Slični Proizvodi:</h2>
<div class="similar-products">
<?= $this->element('products_list', array(
    'products'   => $similar_products,
    'imageSize'  => 80,
    'hideWeight' => true,
    'maxName'    => 10 
)) ?>
</div>
<? endif ?>

<script type="text/javascript">
var productImages = eval('<?= json_encode($productImages) ?>');
for (x in productImages) {
    i = new Image;
    i.src = productImages[x].src;
}

$(function(){
    	if (productImages.length > 0) {
    	$('#product-images .medium .image').click(function(){
    	    if ($('#product-images .medium').hasClass('loading')) {
    		    return;
    	    }
    		
    		var src = this.src.replace(/\?.*?$/g, '');
    
    		var img = new Image();
    		img.src = src;
    
    		preloadImage(img, function() {
    			$('#product-images .medium').addClass('loading');
    		}, function(img){
    			$('#product-images .medium').removeClass('loading');
    			
    			var w = img.width + 20;
    			var h = img.height + 30;
    			var maxW = $(window).innerWidth() - 30;
    			var maxH = $(window).innerHeight() - 30;

    			w = w>maxW ? maxW : w;
    			h = h>maxH ? maxH : h;

    		    img.src = img.src + "?w="+w+"&h="+h;

    			var big = $('<div>');
    			big.append(img);
    			lightbox(big, {
    			    width:  w,
    			    height: h
    			});
    		});
    
    		return false;
    	});
    	$('#product-images ul img').click(function(){
    		var medium = $('#product-images .medium img');
    		var src = this.src.replace(/\?.*?$/g, '');
    		medium.attr('src', src + '?w=<?= $size['medium'][0] ?>&h=<?= $size['medium'][1] ?>');
    
    		return false;
    	});
	}
});
</script>